<template>
  <view class="c-text" @click="$emit('click', $event)">
    <view
      class="c-text-inside"
      :class="ggclass"
      :style="{
        color: colors,
        fontSize: fontSizes,
        width,
        maxWidth,
        fontWeight,
        '-webkit-line-clamp': row,
      }"
    >
      <slot>{{ content }}</slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  computed,
  getCurrentInstance,
  unref,
  toRefs,
  reactive,
} from "vue";
// import {
// 	mapState
// } from 'vuex'
let {proxy} = getCurrentInstance() as any;
let props = defineProps({
  ggclass: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
  fontSize: {
    type: String,
    default: "28rpx",
  },
  row: {
    type: [Number, String],
    default: "",
  },
  width: {
    type: String,
    default: "",
  },
  maxWidth: {
    type: String,
    default: "100%",
  },
  fontWeight: {
    type: [String],
    default: "",
  },
  content: {
    type: [String, Number],
    default: "",
  },
});

// ...mapState(['pattern','aplicationSetting']),
// lanIndex(){
// 	 return props.aplicationSetting?.languageIndex || 0
// },
let fontSizes = computed(() => {
  let num = parseInt(props.fontSize);
  // 判断除了中文 其他语言小两号字体
  // if(props.lanIndex){
  // 	num-=2*2
  // }
  return `${num}rpx`;
});
let colors = computed(() => {
  if (props.color) return proxy.$color[props.color] || props.color;
  return proxy.$color.theme.textColor;
});
</script>

<style scoped>
.c-text {
  display: inline-block;
}
.c-text-inside {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
